<template>
    <view>
        <div class="ping_lis" :class="`ping_lis_${type}`">
            <PingCard class="ping_li" v-for="(li,key) in list" :key="key" :info="li" :type="type" @openPing="openPing" />
        </div>
        <PingAlert v-if="pingAlertData.show" :id="pingAlertData.id" @closePingAlert="pingAlertData.show = false">
        </PingAlert>
    </view>
</template>

<script>
import PingCard from './pingCard.vue';
import PingAlert from './pingAlert.vue';
export default {
    components: { PingCard, PingAlert },
    props: {
        list: {
            type: Array,
            default: [],
        },
        type: {
            type: String,
            default: 'big'
        }
    },
    data() {
        return {
            pingAlertData: {
                show: false,
                id: ''
            },
        };
    },
    computed: {},
    mounted() { },
    methods: {
        openPing(info) {
            this.pingAlertData = {
                show: true,
                id: info.id
            }
        },
    },
};
</script>

<style lang="scss" scoped>
// .ping_lis {}
.ping_lis_small {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin-top: 20rpx;

    .ping_li {
        width: calc((100% - 40rpx) / 3);
        margin: 0 20rpx 20rpx 0;
    }
    .ping_li:nth-child(3n) {
        margin: 0 0 20rpx 0;
    }
}
</style>
